<template>
  <div class="" style="background-color: #f2f4f7;width: 100%;height: 100%">
    <div class="head">
      <span style="padding-bottom: 8px">答卷预览</span>
    </div>


    <div class="examList" v-if="paperData.paperInfo">
      <!--      试题头信息-->
      <div class="examList-head">
        <!--        试卷名称及其信息-->
        <div style="padding-left: 37px;padding-top: 35px">
            <span style="display: flex;font-size: 18px;color: #181E33;font-weight: bold;">
            {{ paperData.paperTitle }}
            </span>
          <!--            v-if="paperData.paperInfo" 防止加载之前报错-->
          <div style="margin-top: 15px;display: flex">
              <span style=" color: #A8A8B3;font-size: 14px;text-align: start!important;width: 95px">
                题量：{{ paperData.paperQuestionList.length }}
              </span>
            <span style="color: #A8A8B3;font-size: 14px;width: 95px">
                满分：{{
                paperData.paperInfo.singleNum * 5 + paperData.paperInfo.multipleNum * 5 + paperData.paperInfo.fillInNum * 5 + paperData.paperInfo.textNum * 10
              }}
              </span>
            <span v-if="paperData.teacher" style="color: #A8A8B3;font-size: 14px;;width: 125px">
                批卷人：{{ paperData.teacher.userName }}
              </span>
          </div>
          <div v-if="paperData.correctAnswerPaperInfo" style="margin-top: 8px;display: flex">
            <div v-for="(correctInfo, index) of paperData.correctAnswerPaperInfo">
              <div style="color: #A8A8B3;font-size: 14px;">
                <div v-if="correctInfo.questionType==1" style="width: 95px;display: flex">
                  选择题：<span style="color: #67C23A;padding-top: 2px">{{ correctInfo.sumScore }}</span>
                </div>
                <div v-if="correctInfo.questionType==2" style="width: 99px;">
                  多选题：<span style="color: #67C23A;padding-top: 2px">{{ correctInfo.sumScore }}</span>
                </div>
                <div v-if="correctInfo.questionType==3" style="width: 95px;">
                  填空题：<span style="color: #67C23A;padding-top: 2px">{{ correctInfo.sumScore }}</span>
                </div>
                <div v-if="correctInfo.questionType==4" style="width: 99px;">
                  简答题：<span style="color: #67C23A;padding-top: 2px">{{ correctInfo.sumScore }}</span>
                </div>
              </div>
            </div>

          </div>

        </div>
        <!--试卷总分-->
        <div v-if="paperData.correctAnswerPaperInfo" style="width: 100%;display: flex;align-items: center;justify-content: end">
          <div style="margin-right: 48px;display: flex">
            <div style="display: flex;flex-direction: column;justify-content: center">
              <i style="color: #409EFF" class="el-icon-s-order"></i>
              <span style="font-size: 12px;color: #409EFF">总分:</span>
            </div>
            <div style="margin-left: 15px;display: flex;flex-direction: row;align-items: end">
              <span style="font-size: 50px;color:#67C23A; ">{{ totalSumScore }}</span><span style="margin-left: 4px">分</span>
            </div>
          </div>

        </div>
      </div>
      <!--     试题部分-->
      <div style="width: 90%;text-align: left; margin-top: 70px;margin-left: 35px">
        <!--单选题-->
        <div v-if="singleList.length!=0" style="margin-top: 35px;width: 100%">
          <div style="margin-bottom: 35px">
            <span style="font-size:18px;font-weight: bold;font-family: 宋体;color: #000000">
              一、单选题 (本题共{{ paperData.paperInfo.singleNum }}小题，每小题5分，共{{ paperData.paperInfo.singleNum * 5 }}分)
            </span>
          </div>
          <!--单选题试题列表-->
          <div class="singleList" v-for="(question,index) of singleList">
            <!--索引-->
            <span style="display: none">{{ String.fromCharCode(index + 65) }}</span>
            <span style="font-size: 19px; line-height: 30px ;font-family: 宋体">{{ index + 1 }}.{{
                question.questionTitle
              }}</span>

            <div style="display: flex">
              <!--选项列表-->
              <el-radio-group v-model="question.selected"
                              style="width: 80%;margin-top: 20px;margin-bottom:50px;display: flex;flex-direction: column;">
                <el-radio style="display: flex; flex-direction: row; align-items: center;margin-bottom: 25px"
                          v-for="(choice, index) of question.paperQuestionChoiceList" :label="String(index+1)"
                          :key="choice.id">
                  <div style=" font-size: 18px;font-family: 宋体 ;margin-left: 10px;display: flex;align-items: center">
                    <span style="">{{ preChoice[index] }}. {{ choice.choiceText }}</span>

                    <template v-for="(answer,index) of question.paperQuestionAnswerList">
                      <template><img
                          v-show="answer.answerText==choice.choiceOrder&&question.selected!=question.paperQuestionAnswerList[0].answerText"
                          style="margin-left: 20px;" src="../../../../src/assets/ic_public_todo_filled.png"></template>
                    </template>
                  </div>
                </el-radio>

              </el-radio-group>
              <!--显示答案正确与否-->
              <div style="width: 50px;height: 30px;margin-left: 110px;display: flex;justify-content: end">
                <div style="width: 40px;height: 40px;">
                  <img v-if="question.selected==question.paperQuestionAnswerList[0].answerText"
                       src="../../../assets/answer_paper_ok.png">
                  <img v-else src="../../../assets/ic_public_cancel_filled.png">
                </div>
              </div>
            </div>


          </div>
        </div>

        <!--多选题-->
        <div v-if="multiList.length!=0" style="margin-top: 65px ">
          <div>
            <span style="font-size:18px;font-weight: bold;font-family: 宋体;color: #000000">
              二、多选题 (本题共{{ paperData.paperInfo.multipleNum }}小题，每小题5分，共{{ paperData.paperInfo.multipleNum * 5 }}分)
              在每小题给出的选项中，有多项符合题目要求，全部选对的得5分，部分选对的得2分，有选错的不得分。
            </span>
          </div>

          <!--多选题题目列表-->
          <div class="multiList" style="width: 100%;text-align: start; margin-top: 35px"
               v-for="(question, index) of multiList">
            <!--题目标题-->
            <span style="display: none">{{ String.fromCharCode(index + 65) }}</span>
            <span style="font-size: 19px;font-family: 宋体;">{{ index + 1 }}.{{ question.questionTitle }}</span>


            <div style="">
              <!--题目选项-->
              <div style="display: flex!important;  font-size: 18px;margin-top: 20px;width: 80%;"
                   v-for="(choice, index) of question.paperQuestionChoiceList">
                <el-checkbox :label="String(index + 1)" v-model="question.selected" style="">
                  <!--选项内容和正确标识-->
                  <div
                      style=" font-size: 18px;font-family: 宋体 ;margin-left: 10px;margin-bottom: 5px;display: flex;align-items: center">
                    <span>{{ preChoice[index] }}. {{ choice.choiceText }}</span>
                    <template v-for="(answer,index) of question.paperQuestionAnswerList">
                      <template><img v-show="answer.answerText==choice.choiceOrder" style="margin-left: 20px;"
                                     src="../../../../src/assets/ic_public_todo_filled.png"></template>
                    </template>
                  </div>
                </el-checkbox>
              </div>
              <!--显示答案正确与否-->
              <div style="width: 40px;height: 30px;display: flex;justify-content: end;">
                <div style="width: 40px;height: 40px;position: relative;left: 840px;bottom: 190px">
                  <!--判断是否选错-->
                  <img
                      v-if="question.selected && question.selected.some(option => !question.paperQuestionAnswerList.some(answer => answer.answerText === option))"
                      src="../../../assets/ic_public_cancel_filled.png">
                  <!--判断是否漏选-->
                  <img
                      v-else-if="question.selected && question.selected.length !== question.paperQuestionAnswerList.length"
                      src="../../../assets/ic_public_fail_filled.png">
                  <!--正确答案-->
                  <img
                      v-else-if="question.selected && question.selected.every(option => question.paperQuestionAnswerList.some(answer => answer.answerText === option )) "
                      src="../../../assets/answer_paper_ok.png">

                </div>
              </div>
            </div>

            <div style="margin-bottom: 60px"></div>
          </div>
        </div>

        <!--填空题-->
        <div v-if="fillInList.length!=0" style="width: 100%;text-align: start; margin-top: 65px ">

          <div>
            <span style="font-size:18px;font-weight: bold;font-family: 宋体;color: #000000">
              三、填空题：本题共{{ paperData.paperInfo.fillInNum }}小题，每小题5分，共{{ paperData.paperInfo.fillInNum * 5 }}分。
              错误则不得分。
            </span>
          </div>

          <div class="fillInList" style="width: 100%;text-align: start; margin-top: 35px"
               v-for="(question,index) of fillInList">
            <!--题目标题-->
            <span style="display: none">{{ String.fromCharCode(index + 65) }}</span>
            <span style="font-size: 19px;font-family: 宋体;">{{ index + 1 }}.{{ question.questionTitle }}</span>

            <!--答案输入框-->
            <div style="display: flex;flex-wrap: wrap; font-size: 18px;margin-top: 15px;margin-bottom: 90px;">
              <div v-for="(answer, index) of question.paperQuestionAnswerList" :label="index + 1">
                <div class="inputDeep" style="display: flex;align-items: start;margin-left: 30px;">
                  <span style="margin-top: 20px">{{ index + 1 }}.</span>
                  <el-input class="input_bottom" style="width: 200px;" v-model="question.selected[index]"/>
                </div>
              </div>
              <div style="margin-top: 30px;width: 630px;">
                <div v-if="paperData.teacher"
                     style="display: flex;align-items: center;justify-content: end;width: 100%">
                  <span style="font-family: Hiragino Sans GB;font-weight: bold;color: #909399">得分:</span>
                  <span v-if="question.score!=0"
                        style="color: #67C23A;font-size: 24px;margin-left: 15px;">{{ question.score }}.0</span>
                  <span v-else style="color: #F56C6C;font-size: 24px;margin-left: 15px;">{{ question.score }}.0</span>
                </div>
              </div>
            </div>

          </div>

        </div>

        <!--简答题-->
        <div v-if="textList.length!=0" style="margin-top: 65px ">
          <div style="width: 100%;text-align: start; margin-top: 65px ">
            <span style="font-size:18px;font-weight: bold;font-family: 宋体;color: #000000">
              四、简答题：本题共{{ paperData.paperInfo.textNum }}小题，每小题10分，共{{ paperData.paperInfo.textNum * 10 }}分。
            </span>
          </div>
          <!--简答题题目列表-->
          <div class="textList" style="width: 100%;text-align: start; margin-top: 35px"
               v-for="(question,index) of textList">
            <!--题目标题-->
            <!--String.fromCharCode(index + 65)  用于建立索引-->
            <span style="display: none">{{ String.fromCharCode(index + 65) }}</span>
            <span style="font-size: 19px;font-family: 宋体;">{{ index + 1 }}.{{ question.questionTitle }}</span>
            <div
                style="display: flex; font-size: 18px; margin-top: 15px; margin-bottom: 100px; width: 500px;display: flex;flex-direction: row">
              <div style="width: 500px!important;">
                <el-input type="textarea" :rows="9" v-model="question.selected"></el-input>
              </div>
              <div v-if="paperData.teacher" style="width: 150px;height: 200px;position: relative;left: 370px;">
                <div style="display: flex;align-items: end;justify-content: center;width: 100%;height: 100%">
                  <span
                      style="font-family: Hiragino Sans GB;font-weight: bold;color: #909399;margin-bottom: 4px;width: 42px">得分:</span>
                  <span v-if="question.score!=0"
                        style="color: #67C23A;font-size: 24px;margin-left: 15px;">{{ question.score }}.0</span>
                  <span v-else style="color: #F56C6C;font-size: 24px;margin-left: 15px;">{{ question.score }}.0</span>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>


      <!--答卷预览悬浮试题导航-->
      <div class="examMenu" v-if="paperData.paperInfo">

        <div v-if="singleList.length!=0">
          <!-- 单选题标题-->
          <div
              style="overflow-y: auto;margin-top: 10px;margin-left:15px;width: 100%; height: 40px; display: flex;align-items: center">
            <span style="font-size:15px;font-family: 微软雅黑">一、单选题 ({{ paperData.paperInfo.singleNum * 5 }}分)</span>
          </div>
          <!--单选题定位按钮-->
          <div style="width: 100%;display:flex;align-items: start;flex-wrap: wrap;">
            <el-button style=" width: 50px;margin-top: 10px;margin-left: 10px" plain size="mini" type="primary"
                       v-for="(question, index) of singleList" @click="scrollToSingleList(index)">
              {{ index + 1 }}
            </el-button>
          </div>
        </div>


        <div v-if="multiList.length!=0">
          <!--多选题标题-->
          <div style="margin-left:15px;width: 100%; height: 40px; display: flex;align-items: center;margin-top: 40px">
            <span style="font-size:15px;font-family: 微软雅黑">二、多选题 ({{ paperData.paperInfo.multipleNum * 5 }}分)</span>
          </div>
          <!--多选题定位按钮-->
          <div style="width: 100%;display:flex;align-items: start;flex-wrap: wrap">
            <el-button style=" width: 50px;margin-top: 10px;margin-left: 10px" plain size="mini" type="primary"
                       v-for="(question, index) of multiList" @click="scrollToMultiList(index)">
              {{ index + 1 }}
            </el-button>
          </div>
        </div>


        <div v-if="fillInList.length!=0">
          <!--填空题标题-->
          <div style="margin-left:15px;width: 100%; height: 40px; display: flex;align-items: center;margin-top: 40px">
            <span style="font-size:15px;font-family: 微软雅黑">三、填空题 ({{ paperData.paperInfo.fillInNum * 5 }}分)</span>
          </div>
          <!--填空题定位按钮-->
          <div style="width: 100%;display:flex;align-items: start;flex-wrap: wrap">
            <el-button style=" width: 50px;margin-top: 10px;margin-left: 10px" plain size="mini" type="primary"
                       v-for="(question, index) of fillInList" @click="scrollToFillInList(index)">
              {{ index + 1 }}
            </el-button>
          </div>
        </div>


        <div v-if="textList.length!=0">
          <!--简答题-->
          <div
              style="margin-left:15px;width: 100%; height: 40px; display: flex;align-items: center;margin-top: 40px"><span
              style="font-size:15px;font-family: 微软雅黑">四、简答题 ({{ paperData.paperInfo.textNum * 10 }}分)</span></div>
          <div style="width: 100%;display:flex;align-items: start;flex-wrap: wrap">
            <el-button style=" width: 50px;margin-top: 10px;margin-left: 10px" plain size="mini" type="primary"
                       v-for="(question, index) of textList" @click="scrollToTextList(index)">
              {{ index + 1 }}
            </el-button>
          </div>
        </div>


        <div style="height: 50px;margin-top: 20px">
          <!--          答卷页面无提交和保存按钮-->

        </div>
        <!--      <el-button></el-button>-->
      </div>
      <div style="height: 200px"></div>
    </div>

  </div>
</template>

<script>
import Session_Storage from "@/utils/sessionStorage";
import {getAnswerPaperViewApi} from "@/api/AnswerPaper";

export default {
  props: {
    answerPaper: {}
  },
  name: "AnswerPaperStuView",
  data() {
    return {
      //接收答卷前置信息的临时量
      answerPaperDataTemp: '',
      paperData: [],
      singleList: [],
      multiList: [],
      fillInList: [],
      textList: [],
      preChoice: ['A', 'B', 'C', 'D'],
    }
  },
  methods: {

    scrollToSingleList(index) {
      const questionElem = this.$el.querySelectorAll('.singleList')[index]
      questionElem.scrollIntoView({behavior: 'smooth'}) // 平滑滚动到对应singleList题目位置
    },
    scrollToMultiList(index) {
      const questionElem = this.$el.querySelectorAll('.multiList')[index]
      questionElem.scrollIntoView({behavior: 'smooth'}) // 平滑滚动到对应multiList题目位置
    },
    scrollToFillInList(index) {
      const questionElem = this.$el.querySelectorAll('.fillInList')[index]
      questionElem.scrollIntoView({behavior: 'smooth'}) // 平滑滚动到对应fillInList题目位置
    },
    scrollToTextList(index) {
      const questionElem = this.$el.querySelectorAll('.textList')[index]
      questionElem.scrollIntoView({behavior: 'smooth'}) // 平滑滚动到对应fillInList题目位置
    },
    //只进行类型筛选
    getQuestionsIndex() {
      this.singleList = this.paperData.paperQuestionList.filter(question => question.questionType === '1')
      //多选题
      this.multiList = this.paperData.paperQuestionList.filter(question => question.questionType === '2')
      //填空题
      this.fillInList = this.paperData.paperQuestionList.filter(question => question.questionType === '3')
      //简答题
      this.textList = this.paperData.paperQuestionList.filter(question => question.questionType === '4')

      this.multiList.forEach(question => {
        question.selected = question.selected.split(',')
      });

      this.fillInList.forEach(question => {
        question.selected = question.selected.split(',')
      });

      console.info(" this.multiList", this.multiList)
      console.info(" this.textList", this.textList)

    },
    //缓存跳转到当前页面的参数
    sessionCache() {
      //从session获取数据
      const infoFromStorage = Session_Storage.getItem('answerPaper');
      // console.info("$route",this.$route)

      if (infoFromStorage) {
        //如果有数据 将其保存在temp中
        this.answerPaperDataTemp = infoFromStorage;
      } else {
        //如果没有就是第一次进入页面 保存数据在session中 并设置temp为当前数据
        this.answerPaperDataTemp = this.answerPaper;
        Session_Storage.setItem("answerPaper", this.answerPaperDataTemp)
      }
    },
    getAnswerPaperData() {
      getAnswerPaperViewApi(this.answerPaperDataTemp).then(res => {
        if (res.data.code == 200) {
          console.info("res.data.data", res.data.data)
          this.paperData = res.data.data
          this.getQuestionsIndex()
        }
      })
    }
  },
  created() {
    this.sessionCache()
    this.getAnswerPaperData()
  },
  //在离开当前页面时清除所有答卷信息
  beforeDestroy() {
    Session_Storage.clear();
  },
  computed: {
    totalSumScore() {
      if (this.paperData.correctAnswerPaperInfo.length === 0) {
        return 0;
      }

      return this.paperData.correctAnswerPaperInfo.reduce((total, info) => {
        return total + parseInt(info.sumScore);
      }, 0);
    }
  }
}
</script>


<style scoped>

.el-radio.is-disabled .el-radio__input.is-disabled + .el-radio__label:before {
  border-color: #c0c4cc;
  background-color: #f5f7fa;
  cursor: not-allowed;
}

.head {
  top: 0;
  background-color: #ffffff;
  display: flex; align-items: center;
  justify-content: center;
  font-size: 18px;
  font-family: 微软雅黑;
  color: #75757b;
  width: 100%;
  height: 50px;
}

.examList {
  margin-top: 32px;
  margin-left: 292px;
  background-color: #ffffff;
  width: 992px;
  border-radius: 10px;
}

.examList-head {
  height: 140px;
  border-bottom: 1px solid #F2F2F2;
  display: flex;
}

.examMenu {
  position: fixed;
  background-color: #ffffff;
  width: 309px;
  top: 90px;
  border-radius: 10px;
  right: 290px;
  z-index: 100;
}

.el-icon-s-order{
  font-size: 30px;
}

</style>

<style>
.input_bottom input {
  border: none !important;
  border-bottom: 1px solid #ccc !important;
  border-radius: 0 !important;
}
</style>